<template>
  <div>
    <el-row justify="center">
      <h1>采购入库</h1>
    </el-row>
    <el-row>
      <el-col :span="22">
        <div  style="display: flex ;justify-content: space-around">
          <el-form-item label="供应商" style="width: 250px">
            <el-select v-model="this.vendor" style="width: 230px">
              <el-option
                  v-for="item in this.vendorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购人 " style="width: 100px">
            {{ this.loginUser.name }}
          </el-form-item>
        </div>
        <el-form-item label="采购物品" style="width:120px">
        </el-form-item>
        <el-table :data="buyCartList" stripe style="margin-bottom: 20px">
          <el-table-column prop="product.name" label="商品名称"></el-table-column>
          <el-table-column prop="product.brand" label="品牌"></el-table-column>
          <el-table-column  label="采购价" prop="product.buyPrice">
            <template #default="scope">
              <el-input-number v-model="scope.row.price" @blur="update(scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column  label="采购数量" prop="product.num">
            <template #default="scope">
              <el-input-number :min="1" v-model="scope.row.num" @blur="update(scope.row)"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="移除商品">
            <template #default="scope">
              <el-button type="danger" @click="del(scope.row.id)">移除商品</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="cleanData">添加商品</el-button>
        <el-button type="primary" @click="inku()">入库</el-button>
        <!--点击添加商品弹出-->
        <el-dialog v-model="dialogVisible" title="添加采购商品" width="30%">
          <el-form :model="productObj" ref="productForm" :rules="rules">
            <el-form-item label="商品编号" prop="id">
              <el-input v-model="productObj.id" @blur="checkProduct"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input v-model="productObj.name" :readonly=this.readonly></el-input>
            </el-form-item>
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="productObj.brand" :readonly=this.readonly></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <el-select v-model="productObj.type" placeholder="请选择类别" :readonly=this.readonly>
                <el-option label="电脑产品" value="电脑产品"></el-option>
                <el-option label="安防产品" value="安防产品"></el-option>
                <el-option label="办公耗材" value="办公耗材"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="采购数量">
              <el-input-number :min="1" v-model="num"></el-input-number>
            </el-form-item>
            <img src="" id="faceImg" width="200" height="200"><br>
            头像：<input type="file" name="face" id="imgFile" @change="fileChange()" :readonly=this.readonly><br>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addProduct">添加</el-button>
      </span>
          </template>
        </el-dialog>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fileList:[],
      loginUser:{},
      num:"",//采购数量
      readonly:false,
      productObj:{},
      productForm:{},
      productImg:"",
      buyCartList:[],
      vendorList:[],
      imgSrc:'',
      vendor:{},
      file:{},
      isAdd:"",
      buyCar:{product:{}},
      dialogVisible:false,
      //校验规则
      rules:{
        id:[{required:true,message:'请输入商品编号',trigger:'blur'}],
        name:[{required:true,message:'请输入商品名称',trigger:'blur'}],
        brand:[{required:true,message:'请输入品牌',trigger:'blur'}],
      }
    }
  },
  methods:{
    findByUserId(){
      axios.get("/project/buyCar/findByUserId",{params:{userId:this.loginUser.id}}).then(resp=>{
        this.buyCartList=resp.data
      })
    },
    del(buyCarId){
      axios.get("/project/buyCar/del",{params:{buyCarId}}).then(resp=>{
        if (resp.data=="ok"){
          this.findByUserId()
        }
      })
    },
    update(updateObj){
      let updateParam={id:updateObj.id, price:updateObj.price,num:updateObj.num}
      axios.get("/project/buyCar/update",{params:updateParam}).then(resp=>{
        if (resp.data=="ok"){
          this.findByUserId()
        }
      })
    },
    cleanData(){
      this.productObj={};
      this.readonly=false;
      this.dialogVisible =true;
      document.getElementById("faceImg").src="";
    },
    // 检查欲添加的商品是否在采购车中存在
    checkProduct(){
      axios.get("/project/product/findById",{params:{id:this.productObj.id}}).then(resp=>{
        if (resp.data!=''){
          this.productObj=resp.data
          this.readonly=true
          document.getElementById("faceImg").src="/project/productImg/"+this.productObj.imgPath
          this.findByUserId()
        }else {
          this.isAdd="isAdd"
          this.findByUserId()
        }
      })
    },
    addProduct(){

      this.$refs.productForm.validate((valid) => {
        if (valid) {
          let paramObj = new FormData;
          paramObj.append("id",this.productObj.id)
          paramObj.append("name",this.productObj.name)
          paramObj.append("type",this.productObj.type)
          paramObj.append("brand",this.productObj.brand)
          paramObj.append("face",document.getElementById("imgFile").files[0]);
          paramObj.append("num",this.num);
          console.log(paramObj)
          let config = {
            headers: {'Content-Type': 'multipart/form-data' }
          }
          axios.post("/project/product/add",paramObj,config).then(response=>{
            if (response.data=='ok'){
              this.findByUserId();
              this.dialogVisible=false;
            }
          })
        }
      });
    },

    fileChange(){
      let reader = new FileReader();//定义文件读取流对象
      reader.readAsDataURL(document.getElementById("imgFile").files[0]);
      reader.onload = function (ev) {
        document.getElementById("faceImg").src = ev.target.result;
      }
    },
    inku(){
      axios.get("/project/product/inKu",{
        params:{
          vendorId : this.vendor
        }}).then(resp=>{
        if (resp.data=="ok"){
          console.log(this.vendor)
          this.findByUserId()
        }
      })
    },
    findAll(){
      axios.get("/project/vendor/findAll").then(resp=>{
        this.vendorList=resp.data
        // this.vendor=this.vendorList.findIndex(2)
        // console.log(this.vendorList)
      })
    }

  },
  created() {
    this.findAll()
    this.loginUser=JSON.parse(sessionStorage.getItem("loginUser"))
    this.findByUserId()
  }
}
</script>

<style scoped>

</style>